import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { useState } from 'react';


class color_data
{
	id:number;
	color_r:number;
	color_g:number;
	color_b:number;

	constructor(id:number, color_r:number, color_g:number, color_b:number)
	{
		this.id = id;
		this.color_r = color_r;
		this.color_g = color_g;
		this.color_b = color_b;
	}
}

interface change_color_lists
{
    (color_data_inst:color_data[]):void;
}

interface change_range
{
    (num:number):void;
}

function Colorlist({callbackfunction}:{callbackfunction: change_color_lists})
{
	const [lists, setlists] = useState([new color_data(0, 4, 1, 1), new color_data(1, 1, 4, 1)]);
	const [id, setid] = useState(2);


	function handle_add(event:any) 
	{

		const new_lists:color_data[] = [...lists, new color_data(id, 4, 4, 4)];

		setlists(new_lists);

		setid(id + 1);

		callbackfunction(new_lists);
	}

	function color_delete(event:any)
	{
		const new_lists = lists.filter((element)=>element.id.toString() != event.target.name);

		setlists(new_lists);

		callbackfunction(new_lists);
	}



	function color_change(event:any)
	{

		function color_string_to_array(color:string):number[]
		{
			let data_add:number[] = new Array();
			for (let i_char = 0; i_char < 3; i_char += 1) 
			{
				let string_tmp = color[i_char * 2 + 1] + color[i_char * 2 + 2];
				data_add[i_char] = parseInt(string_tmp, 16) / 255.0 * 4.0;
			}

			return data_add;
		}

		let color_data:number[] = color_string_to_array(event.target.value);


		for(let i = 0;i < lists.length;i += 1)
		{
			if(lists[i].id == event.target.name)
			{
				let color_data:number[] = color_string_to_array(event.target.value);

				lists[i].color_r = color_data[0];
				lists[i].color_g = color_data[1];
				lists[i].color_b = color_data[2];
			
				break;
			}
		}

		setlists(lists);

		callbackfunction(lists);
	}


	const items = lists.map((num:color_data) => <li key = {num.id.toString()}>
		<input type = 'color' name = {num.id.toString()} onChange = {color_change}></input>
		<button name = {num.id.toString()} onClick = {color_delete}> 删除 </button>
		</li>);

	return <div>
	<ul>{items}</ul>
	<button onClick={handle_add}>向颜色表格添加颜色</button>
	</div>;
}

function Button_and_range({callbackfunction}:{callbackfunction: change_range})
{
	const [value, setValue] = useState('0.03');

	function range_change(event:any)
	{
		callbackfunction(parseFloat(event.target.value));

		setValue(event.target.value);
	}

	

	return (
	<>
		<label>烟花数量</label>
		<input type='range' min='0.0' max='0.4' step='0.01' value={value} onChange={range_change}></input>
	</>
	);
}


function render_all(change_color_lists:change_color_lists, change_range:change_range)
{
    const react_list = createRoot(document.getElementById('color_list'));
	react_list.render(<Colorlist callbackfunction = {change_color_lists} />);

	const react_input = createRoot(document.getElementById('butten_and_range'));
	react_input.render(<Button_and_range callbackfunction = {change_range} />);
}

export {render_all, color_data};